<template>
  <div
    class="app-container view_home"
    v-resize="resize"
    style="height: calc(-116px + 100vh); width: 1400px; margin: 24px auto 0"
  >
    <div style="height: calc(-156px + 100vh); padding: 0 38px; overflow: auto">
      <!--    活跃用户-->
      <div class="firstTitle">活跃用户</div>
      <div class="doubleBox">
        <!--      活跃学生-->
        <el-card class="box-card">
          <div class="innerFlexbox">
            <!--          今日活跃-->
            <div class="dynamicStudent">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">
                  活跃学生
                  <el-tooltip
                    placement="top-start"
                    content="进行课程内容学习、考核、练习等行为的学生被视为活跃学生"
                  >
                    <img src="@/assets/images/question.png" class="tipsIcon"/>
                  </el-tooltip>
                </div>
              </div>
              <div style="width: 100%; height: 100%">
                <div class="pieChart" ref="dynamicStudent"></div>
                <div class="dynamicStudenttext">
                  今日活跃学生人数：{{ activestudentToday }}
                </div>
              </div>
            </div>
            <!--          活跃-->
            <div class="dynamichistoryStudent">
              <div class="TitleBox">
                <div class="sunTitle">
                  <div class="subborder"></div>
                  <div class="sunTitletext">学生人数</div>
                </div>
                <div class="lookMore" @click="lookDetail(1, 'user')">
                  查看详情 >
                </div>
              </div>
              <!--            TODO:切换-->
              <div class="changeTab">
                <div
                  :class="studentType === 1 ? 'active' : ''"
                  @click="changeDate(1, 1)"
                >
                  近7天
                </div>
                <div
                  :class="studentType === 2 ? 'active' : ''"
                  @click="changeDate(1, 2)"
                >
                  近30天
                </div>
                <div
                  :class="studentType === 3 ? 'active' : ''"
                  @click="changeDate(1, 3)"
                >
                  本学期
                </div>
              </div>
              <div style="width: 100%; height: 100%">
                <div class="lineChart" ref="historyStudent"></div>
              </div>
            </div>
          </div>
        </el-card>
        <!--      活跃教师-->
        <el-card class="box-card">
          <div class="innerFlexbox">
            <!--          今日活跃-->
            <div class="dynamicStudent">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">
                  活跃教师
                  <el-tooltip
                    placement="top-start"
                    content="进行课程内容编辑、考核批改、学生评价等行为的教师被视为活跃教师"
                  >
                    <img src="@/assets/images/question.png" class="tipsIcon"/>
                  </el-tooltip>
                </div>
              </div>
              <div style="width: 100%; height: 100%">
                <div class="pieChart" ref="dynamicTeacher"></div>
                <div class="dynamicStudenttext">
                  今日活跃教师人数：{{ activeteacherToday }}
                </div>
              </div>
            </div>
            <!--          活跃-->
            <div class="dynamichistoryStudent">
              <div class="TitleBox">
                <div class="sunTitle">
                  <div class="subborder"></div>
                  <div class="sunTitletext">教师人数</div>
                </div>
                <div class="lookMore" @click="lookDetail(2, 'user')">
                  查看详情 >
                </div>
              </div>
              <!--            TODO:切换-->
              <div class="changeTab">
                <div
                  :class="teacherType === 1 ? 'active' : ''"
                  @click="changeDate(2, 1)"
                >
                  近7天
                </div>
                <div
                  :class="teacherType === 2 ? 'active' : ''"
                  @click="changeDate(2, 2)"
                >
                  近30天
                </div>
                <div
                  :class="teacherType === 3 ? 'active' : ''"
                  @click="changeDate(2, 3)"
                >
                  本学期
                </div>
              </div>
              <div style="width: 100%; height: 100%">
                <div class="lineChart" ref="historyTeacher"></div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!--    课程数据-->
      <div class="firstTitle">课程数据</div>
      <div class="doubleBox">
        <!--      今日活跃课程-->
        <el-card class="box-card">
          <div class="text item">
            <div class="TitleBox">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">今日活跃课程</div>
                <el-tooltip
                  placement="top-start"
                  content="当日课程活跃学生人数≥2人时，视为活跃课程
  "
                >
                  <img src="@/assets/images/question.png" class="tipsIcon"/>
                </el-tooltip>
              </div>
              <!--            <div class="lookMore" @click="lookDetail()">查看详情 ></div>-->
            </div>
            <div class="courseBox">
              <div class="course_l">
                <div class="dynamicStudenttext" v-if="!coursedatanone">
                  今日活跃课程：{{ activeCourseCountToday }}
                </div>
                <!--              <div class="dynamicStudenttext">-->
                <!--                <span>活跃课程较昨日</span>-->
                <!--                <span class="stateUp">1%</span>-->
                <!--                <img src="@/assets/images/up.png" class="stateIcon">-->
                <!--                <img src="@/assets/images/down.png" v-if="false" class="stateIcon">-->
                <!--              </div>-->
              </div>
              <img
                src="@/assets/images/datanone.png"
                v-if="coursedatanone"
                class="noneImg"
              />
              <div
                class="course_r"
                ref="dynamicCourse"
                v-if="!coursedatanone"
              ></div>
            </div>
          </div>
        </el-card>
        <!--      活跃课程-->
        <el-card class="box-card">
          <div>
            <div class="TitleBox">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">活跃课程</div>
              </div>
              <div class="lookMore" @click="lookDetail(0, 'course')">
                查看详情 >
              </div>
            </div>
            <div class="changeTab">
              <div
                :class="courseType === 1 ? 'active' : ''"
                @click="changeDate(3, 1)"
              >
                近7天
              </div>
              <div
                :class="courseType === 2 ? 'active' : ''"
                @click="changeDate(3, 2)"
              >
                近30天
              </div>
              <div
                :class="courseType === 3 ? 'active' : ''"
                @click="changeDate(3, 3)"
              >
                本学期
              </div>
            </div>
            <div class="historyCourse" ref="historyCourse"></div>
          </div>
        </el-card>
      </div>
      <div class="singleBox">
        <!--      今日课程学习情况-->
        <el-card class="box-card">
          <div class="text item">
            <div class="TitleBox">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">今日课程学习情况（活跃人数</div>

                <div class="sunTitletext">/ 未结课人数）</div>
              </div>
              <div class="lookMore" @click="lookDetail(0, 'courseStudy')">
                查看详情 >
              </div>
            </div>
            <div class="todayCourseTable">
              <el-table :data="courseList" style="width: 100%">
                <el-table-column type="index" align="center"></el-table-column>
                <el-table-column
                  prop="courseName"
                  label="课程名称"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="branchName"
                  label="分院名称"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="principalName"
                  label="主讲教师"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="activeCount" align="center">
                  <template #header>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      活跃人数
                      <el-tooltip
                        placement="top-start"
                        content="课程活跃学生人数
  "
                      >
                        <img
                          src="@/assets/images/question.png"
                          class="tipsIcon"
                        />
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="studyCount" align="center">
                  <template #header>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      未结课人数
                      <el-tooltip
                        placement="top-start"
                        content="未结束课程学习的学生数（注：当日结课学生数据24时更新）
  "
                      >
                        <img
                          src="@/assets/images/question.png"
                          class="tipsIcon"
                        />
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="studyPercent"
                  label="学习人数占比"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
      <div class="singleBox">
        <!--      课程考核一次通过-->
        <el-card class="box-card">
          <div class="text item">
            <div class="TitleBox">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">课程考核首次通过</div>
              </div>
              <div class="lookMore" @click="lookDetail(0, 'firstPass')">
                查看详情 >
              </div>
            </div>
            <div class="todayCourseTable">
              <el-table :data="firstPassList" style="width: 100%">
                <el-table-column type="index" align="center"></el-table-column>
                <el-table-column
                  prop="courseName"
                  label="课程名称"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="branchName"
                  label="分院名称"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="principalName"
                  label="主讲教师"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="passingOnceCount"
                  label="首次通过数"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="examPaperCount"
                  label="首次考核数"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="passingOncePercent"
                  label="首次通过率"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
      <!--    班级数据-->
      <div class="firstTitle">班级数据</div>
      <div class="doubleBox">
        <!--      今日活跃班级-->
        <el-card class="box-card">
          <div class="text item">
            <div class="TitleBox">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">今日活跃班级</div>
                <el-tooltip
                  placement="top-start"
                  content="当日班级活跃学生人数≥班级人数×50%，视为活跃班级"
                >
                  <img src="@/assets/images/question.png" class="tipsIcon"/>
                </el-tooltip>
              </div>
              <!--            <div class="lookMore" @click="lookDetail()">查看详情 ></div>-->
            </div>
            <div class="courseBox">
              <div class="course_l">
                <div class="dynamicStudenttext" v-if="!coursedatanone">
                  今日活跃班级：{{ activeClassCountToday }}
                </div>
                <!--              <div class="dynamicStudenttext">-->
                <!--                <span>活跃课程较昨日</span>-->
                <!--                <span class="stateUp">1%</span>-->
                <!--                <img src="@/assets/images/up.png" class="stateIcon">-->
                <!--                <img src="@/assets/images/down.png" v-if="false" class="stateIcon">-->
                <!--              </div>-->
              </div>
              <img
                src="@/assets/images/datanone.png"
                v-if="coursedatanone"
                class="noneImg"
              />
              <div
                class="course_r"
                ref="dynamicCalss"
                v-if="!coursedatanone"
              ></div>
            </div>
          </div>
        </el-card>
        <!--      活跃班级-->
        <el-card class="box-card">
          <div>
            <div class="TitleBox">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">活跃班级</div>
              </div>
              <div class="lookMore" @click="lookDetail(0, 'classes')">
                查看详情 >
              </div>
            </div>
            <div class="changeTab">
              <div
                :class="classType === 1 ? 'active' : ''"
                @click="changeDate(4, 1)"
              >
                近7天
              </div>
              <div
                :class="classType === 2 ? 'active' : ''"
                @click="changeDate(4, 2)"
              >
                近30天
              </div>
              <div
                :class="classType === 3 ? 'active' : ''"
                @click="changeDate(4, 3)"
              >
                本学期
              </div>
            </div>
            <div class="historyCourse" ref="historyClass"></div>
          </div>
        </el-card>
      </div>
      <div class="singleBox">
        <!--      班级重考次数占比-->
        <el-card class="box-card">
          <div class="text item">
            <div class="TitleBox">
              <div class="sunTitle">
                <div class="subborder"></div>
                <div class="sunTitletext">班级重考次数占比（班级重考人次</div>
                <div class="sunTitletext">/ 班级已考试人次）</div>
              </div>
              <div class="lookMore" @click="lookDetail(0, 'resetExam')">
                查看详情 >
              </div>
            </div>
            <div class="todayCourseTable">
              <el-table :data="TestRateOfClassList" style="width: 100%">
                <el-table-column type="index" align="center"></el-table-column>
                <el-table-column
                  prop="className"
                  label="班级名称"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="branchName"
                  label="分院名称"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="studentCount"
                  label="班级人数"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="totalRetestCount" align="center">
                  <template #header>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      重考人次
                      <el-tooltip
                        placement="top-start"
                        content="重考人次：班级中所有学生考核重考次数之和

  "
                      >
                        <img
                          src="@/assets/images/question.png"
                          class="tipsIcon"
                        />
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="totalExamCount" align="center">
                  <template #header>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                      "
                    >
                      已考试人次
                      <el-tooltip
                        placement="top-start"
                        content="已考试人次：班级中所有学生全部考核次数之和


  "
                      >
                        <img
                          src="@/assets/images/question.png"
                          class="tipsIcon"
                        />
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="retestPercent"
                  label="重考比例"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
      <!--    活跃用户-->
      <ActiveUser ref="activeUser"></ActiveUser>
      <!--    活跃课程-->
      <ActiveCourse ref="activeCourse"></ActiveCourse>
      <!--    课程学习情况-->
      <Todaystudy ref="todaystudy"></Todaystudy>
      <!--    活跃班级-->
      <Classdetail ref="classdetail"></Classdetail>
      <!--    考核首次通过-->
      <Firstpass ref="firstpass"></Firstpass>
      <!--    重考次数-->
      <ResetExam ref="resetExam"></ResetExam>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getactiveClassToday,
  getActiveCourse,
  getActiveCourseList,
  getActivehistoryClass,
  getActivehistoryCourse,
  getActiveUser,
  getFirstPassCourseList,
  getreTestRateOfClassList
} from '@/api/homePage'
import ActiveUser from '@/views/activeDetail/activeUser'
import ActiveCourse from '@/views/activeDetail/activeCourse'
import Todaystudy from '@/views/activeDetail/todayCourseStudy'
import Classdetail from '@/views/activeDetail/actveClass'
import Firstpass from '@/views/activeDetail/firstPass'
import ResetExam from '@/views/activeDetail/resetExam'

export default {
  components: {
    ActiveUser,
    ActiveCourse,
    Todaystudy,
    Classdetail,
    Firstpass,
    ResetExam
  },
  name: 'index',
  data() {
    return {
      loading: true,
      open: false,
      // 重考次数
      TestRateOfClassList: [],
      // 活跃班级
      classType: 1,
      activeClassCountToday: '',
      // 首次考核通过
      firstPassList: [],
      // 课程数据
      activeCourseCountToday: '',
      courseType: 1,
      courseList: [],
      branchId: '',
      // 学生数据
      studentType: 1,
      activestudentToday: '',
      loginstudentPercent: '',
      activestudentPercent: '',
      // 教师数据
      teacherType: 1,
      activeteacherToday: '',
      loginteacherPercent: '',
      activeteacherPercent: '',
      dynamicCalss: '',
      historyClass: '',
      historyCourse: '',
      dynamicCourse: '',
      dynamicTeacher: '',
      historyTeacher: '',
      dynamicStudent: '',
      historyStudent: '',
      editorContent: '',
      replaceString: '',
      classTimer: null,
      courseTimer: null,
      coursedatanone: false,
      classdatanone: false
    }
  },
  watch: {},
  mounted() {
    // 获取活跃学生
    this.getActiveStudent()
    // 获取活跃教师
    this.getActiveTeacher()
    // 获取活跃课程
    this.getActiveCourse()
    // 获取活跃课程
    this.getActivehistoryCourse()
    // 获取课程学习情况
    this.getActiveCourseList()
    // 获取首次考核通过
    this.getFirstPassCourseList()
    // 获取活跃班级
    this.getactiveClassToday()
    // 获取活跃班级
    this.getActivehistoryClass()
    // 重考次数占比
    this.getreTestRateOfClassList()
  },
  directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = '',
          height = ''

        function isreize() {
          const style = document.defaultView.getComputedStyle(el)
          if (width !== style.width || height !== style.height) {
            binding.value() // 关键
          }
          width = style.width
          height = style.height
        }

        el.__vueSetInterval__ = setInterval(isreize, 300)
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__)
      }
    }
  },
  beforeDestroy() {
    this.clearIntervalTimer()
  },
  methods: {
    clearIntervalTimer() {
      clearInterval(this.courseTimer)
      clearInterval(this.classTimer)
      this.courseTimer = null
      this.classTimer = null
    },
    resize() {
      console.log('我变了')
      if (this.historyStudent) {
        this.historyStudent.resize()
      }
      if (this.dynamicStudent) {
        this.dynamicStudent.resize()
      }
      if (this.dynamicTeacher) {
        this.dynamicTeacher.resize()
      }
      if (this.historyTeacher) {
        this.historyTeacher.resize()
      }
      if (this.dynamicCourse) {
        this.dynamicCourse.resize()
      }
      if (this.historyCourse) {
        this.historyCourse.resize()
      }
      if (this.dynamicCalss) {
        this.dynamicCalss.resize()
      }
      if (this.historyClass) {
        this.historyClass.resize()
      }
    },
    // 活跃学生
    setStudentOption(loginPercent, activePercent) {
      let option
      let series = []
      let pieDatas = [
        {
          value: loginPercent,
          name: '登录人数'
        },
        {
          value: activePercent,
          name: '活跃人数'
        }
      ]
      let maxRadius = 60,
        barWidth = 12,
        barGap = 10
      // let showValue = true, showPercent = true;
      let barColor = ['#256FFE', '#04D3B4']
      let bgList = ['rgba(37, 111, 254, 0.2)', 'rgba(4, 211, 180, 0.2)']
      pieDatas.map((item, i) => {
        series.push({
          type: 'pie',
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [
            maxRadius - i * (barGap + barWidth) + '%',
            maxRadius - (i + 1) * barWidth - i * barGap + '%'
          ],
          center: ['50%', '40%'],
          label: {
            show: false
          },
          itemStyle: {
            borderRadius: 100,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [
            {
              value: item.value,
              name: item.name,
              itemStyle: {
                color: barColor[i]
              }
            },
            {
              value: 100 - item.value,
              name: '',
              itemStyle: {
                color: 'transparent'
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 0,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [
            maxRadius - i * (barGap + barWidth) + '%',
            maxRadius - (i + 1) * barWidth - i * barGap + '%'
          ],
          center: ['50%', '40%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          data: [
            {
              value: 1,
              itemStyle: {
                color: bgList[i]
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
      })
      option = {
        grid: {
          top: '33%',
          bottom: '54%',
          left: '30%',
          containLabel: false
        },
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              inside: true,
              textStyle: {
                color: '#fff',
                fontSize: 12
              },
              show: false
            },
            data: pieDatas.map((x) => x.value + '%')
          },
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              inside: true,
              textStyle: {
                color: '#fff',
                fontSize: 14
              },
              show: false
            },
            data: pieDatas.map((x) => x.value + '%')
          }
        ],
        legend: {
          show: true,
          top: 'bottom',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          formatter: function(name) {
            let res = pieDatas.filter((n) => n.name === name)
            return `${name}  ${res[0]?.value}%`
          },
          textStyle: {
            fontSize: 12,
            color: '#999999',
            padding: [0, 0, 0, 8]
          }
        },
        series: series
      }
      option && this.dynamicStudent.setOption(option)
    },
    // 活跃学生
    sethistorystudent(xAxis, series, a) {
      let option
      option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(data) {
            let text = ''
            if (a) {
              if (series[0].list[data[0].dataIndex]) {
                series[0].list[data[0].dataIndex].forEach((e, i) => {
                  if (e) {
                    text += e.date + '&nbsp;&nbsp;'
                    text +=
                      data[0].marker +
                      data[0].seriesName +
                      series[1].list[data[0].dataIndex][i].data +
                      '&nbsp;&nbsp;' +
                      data[1].marker +
                      data[1].seriesName +
                      series[0].list[data[1].dataIndex][i].data +
                      '人<br/>'
                  }
                })
              } else {
                text += ''
              }
            } else {
              text = data[0].name + '<br/>'
              for (let n = 0; n < data.length; n++) {
                text +=
                  data[n].marker +
                  data[n].seriesName +
                  ': ' +
                  data[n].value +
                  '人<br/>'
              }
            }
            return text
          }
        },
        legend: {
          top: '8%',
          data: ['登录人数', '活跃人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis
          // TODO:设置x轴lable间隔
          // axisLabel:{ // axisLabe可以是一个数值，代表间隔多少，也可以是一个函数
          //   interval:(index,val)=>{
          //     const arr = ['Mon', 'Wed', 'Thu', 'Sat', 'Sun']
          //     // 自定义间隔，return true表示显示label，false不显示label
          //     if (arr.indexOf(val) !== -1) return true;
          //     else return false;
          //   },
          // },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '登录人数',
            type: 'line',
            smooth: true,
            data: series[1].data
          },
          {
            name: '活跃人数',
            type: 'line',
            smooth: true,
            color: '#04D3B4',
            data: series[0].data
          }
        ],
        dataZoom: [
          {
            bottom: 8,
            height: 10,
            type: 'slider', // 使用滑动条来控制
            showDataShadow: true, // 是否显示数据阴影
            start: 0, // 起始位置
            end: 100 // 结束位置
          },
          {
            bottom: 8,
            height: 10,
            type: 'inside', // 使用内置的区域缩放控制
            start: 0,
            end: 2
          }
        ]
      }
      this.historyStudent.setOption(option)
    },
    // 活跃教师
    setTeacherOption(loginPercent, activePercent) {
      let option
      let series = []
      let pieDatas = [
        {
          value: loginPercent,
          name: '登录人数'
        },
        {
          value: activePercent,
          name: '活跃人数'
        }
      ]
      let maxRadius = 60,
        barWidth = 12,
        barGap = 10
      // let showValue = true, showPercent = true;
      let barColor = ['#256FFE', '#04D3B4']
      let bgList = ['rgba(37, 111, 254, 0.2)', 'rgba(4, 211, 180, 0.2)']
      pieDatas.map((item, i) => {
        series.push({
          type: 'pie',
          clockWise: true, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [
            maxRadius - i * (barGap + barWidth) + '%',
            maxRadius - (i + 1) * barWidth - i * barGap + '%'
          ],
          center: ['50%', '40%'],
          label: {
            show: false
          },
          itemStyle: {
            borderRadius: 100,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [
            {
              value: item.value,
              name: item.name,
              itemStyle: {
                color: barColor[i]
              }
            },
            {
              value: 100 - item.value,
              name: '',
              itemStyle: {
                color: 'transparent'
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
        series.push({
          name: '',
          type: 'pie',
          silent: true,
          z: 0,
          clockWise: false, //顺时加载
          hoverAnimation: false, //鼠标移入变大
          radius: [
            maxRadius - i * (barGap + barWidth) + '%',
            maxRadius - (i + 1) * barWidth - i * barGap + '%'
          ],
          center: ['50%', '40%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          data: [
            {
              value: 1,
              itemStyle: {
                color: bgList[i]
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }
          ]
        })
      })
      option = {
        grid: {
          top: '33%',
          bottom: '54%',
          left: '30%',
          containLabel: false
        },
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              inside: true,
              textStyle: {
                color: '#fff',
                fontSize: 14
              },
              show: false
            },
            data: pieDatas.map((x) => x.value + '%')
          }
        ],
        legend: {
          show: true,
          top: 'bottom',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 10,
          formatter: function(name) {
            let res = pieDatas.filter((n) => n.name === name)
            return `${name}  ${res[0]?.value}%`
          },
          textStyle: {
            fontSize: 12,
            color: '#999999',
            padding: [0, 0, 0, 8]
          }
        },
        series: series
      }

      option && this.dynamicTeacher.setOption(option)
    },
    // 活跃教师
    sethistoryTeacher(xAxis, series, a) {
      // this.historyTeacher = echarts.init(this.$refs.historyTeacher);
      let option
      option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(data) {
            let text = ''
            if (a) {
              if (series[0].list[data[0].dataIndex]) {
                series[0].list[data[0].dataIndex].forEach((e, i) => {
                  if (e) {
                    text += e.date + '&nbsp;&nbsp;'
                    text +=
                      data[0].marker +
                      data[0].seriesName +
                      series[1].list[data[0].dataIndex][i].data +
                      '&nbsp;&nbsp;' +
                      data[1].marker +
                      data[1].seriesName +
                      series[0].list[data[1].dataIndex][i].data +
                      '人<br/>'
                  }
                })
              } else {
                text += ''
              }
            } else {
              text = data[0].name + '<br/>'
              for (let n = 0; n < data.length; n++) {
                text +=
                  data[n].marker +
                  data[n].seriesName +
                  ': ' +
                  data[n].value +
                  '人<br/>'
              }
            }
            return text
          }
        },
        legend: {
          top: '8%',
          data: ['登录人数', '活跃人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xAxis
          // TODO:设置x轴lable间隔
          // axisLabel:{ // axisLabe可以是一个数值，代表间隔多少，也可以是一个函数
          //   interval:(index,val)=>{
          //     const arr = ['Mon', 'Wed', 'Thu', 'Sat', 'Sun']
          //     // 自定义间隔，return true表示显示label，false不显示label
          //     if (arr.indexOf(val) !== -1) return true;
          //     else return false;
          //   },
          // },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '登录人数',
            type: 'line',
            smooth: true,
            color: '#4165FF',
            data: series[1].data
          },
          {
            name: '活跃人数',
            type: 'line',
            smooth: true,
            color: '#04D3B4',
            data: series[0].data
          }
        ],
        dataZoom: [
          {
            bottom: 8,
            height: 10,
            type: 'slider', // 使用滑动条来控制
            showDataShadow: true, // 是否显示数据阴影
            start: 0, // 起始位置
            end: 100 // 结束位置
          },
          {
            bottom: 8,
            height: 10,
            type: 'inside', // 使用内置的区域缩放控制
            start: 0,
            end: 2
          }
        ]
      }
      this.historyTeacher.setOption(option)
    },
    // 活跃课程
    setCourseOption(arr, activeCoursePercentToday) {
      let option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}门 ({d}%)'
        },
        backgroundColor: '#fff',
        color: [
          '#EAEA26',
          '#906BF9',
          '#FE5656',
          '#01E17E',
          '#3DD1F9',
          '#FFAD05'
        ],
        grid: {
          left: 500,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true
        },
        polar: {
          // center: [150, 150]
        },
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B4A6B',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            show: false,
            interval: 0,

            color: '#0B4A6B',
            margin: 8,
            fontSize: 14
          }
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,.0)',
              width: 0
            }
          },
          axisLabel: {
            formatter: '（value） %',
            show: false,
            padding: [0, 0, 20, 0],
            color: '#0B3E5E',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#F1F8FF',
              width: 2,
              type: 'solid'
            }
          }
        },
        calculable: true,
        graphic: {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: `${activeCoursePercentToday}%`,
            textAlign: 'center',
            fill: '#333',
            fontSize: 12
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['17%', '18%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55
              }
            },
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#B5CCE7'
                  }
                },
                tooltip: {
                  show: false
                }
              }
            ]
          },
          {
            type: 'pie',
            radius: ['90%', '92%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55
              }
            },
            name: '',
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#F1F8FF'
                  }
                },
                tooltip: {
                  show: false
                }
              }
            ]
          },
          {
            stack: 'a',
            type: 'pie',
            radius: ['20%', '80%'],
            roseType: 'area',
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: function(param) {
                  let style = ''
                  switch (param.name) {
                  }
                  return (
                    '{a|' +
                    param.name +
                    '}\n' +
                    '（' +
                    style +
                    param.value +
                    '门' +
                    '）'
                  )
                },
                textStyle: {
                  fontSize: 12
                },
                rich: {
                  a: {
                    color: '#666666',
                    fontSize: '12'
                  },
                  s1: {
                    color: '#F25646',
                    fontSize: '12'
                  },
                  s2: {
                    color: '#FA971E',
                    fontSize: '12'
                  },
                  s3: {
                    color: '#EDC644',
                    fontSize: '12'
                  },
                  s4: {
                    color: '#47B17D',
                    fontSize: '12'
                  },
                  s5: {
                    color: '#43C9D2',
                    fontSize: '12'
                  },
                  s6: {
                    color: '#4BCFFC',
                    fontSize: '12'
                  },
                  s7: {
                    color: '#0892E5',
                    fontSize: '12'
                  },
                  s8: {
                    color: '#0464DB',
                    fontSize: '12'
                  },
                  s9: {
                    color: '#EDC644',
                    fontSize: '12'
                  },
                  s10: {
                    color: '#138DFF',
                    fontSize: '12'
                  },
                  s11: {
                    color: '#CC0000',
                    fontSize: '12'
                  },
                  s12: {
                    color: '#DDAA00',
                    fontSize: '12'
                  },
                  s13: {
                    color: '#99DD00',
                    fontSize: '12'
                  },
                  s14: {
                    color: '#00DD00',
                    fontSize: '12'
                  },
                  s15: {
                    color: '#00DDAA',
                    fontSize: '12'
                  },
                  s16: {
                    color: '#009FCC',
                    fontSize: '12'
                  },
                  s17: {
                    color: '#0000CC',
                    fontSize: '12'
                  },
                  s18: {
                    color: '#CC00CC',
                    fontSize: '12'
                  },
                  s19: {
                    color: '#EE7700',
                    fontSize: '12'
                  },
                  s20: {
                    color: '#C10066',
                    fontSize: '12'
                  }
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [
                    {
                      c1: '#c5223b',
                      c2: '#fa768a'
                    },
                    {
                      c1: '#de7110',
                      c2: '#fecd70'
                    },
                    {
                      c1: '#d09f08',
                      c2: '#FFD145'
                    },
                    {
                      c1: '#238483',
                      c2: '#55C27C'
                    },
                    {
                      c1: '#45EAFF',
                      c2: '#40ADAC'
                    },
                    {
                      c1: '#12B3F8',
                      c2: '#7DE8FF'
                    },
                    {
                      c1: '#0176D3',
                      c2: '#13B7FF'
                    },
                    {
                      c1: '#015BD3',
                      c2: '#138DFF'
                    },
                    {
                      c1: '#FF8888',
                      c2: '#CC0000'
                    },
                    {
                      c1: '#FFDD55',
                      c2: '#DDAA00'
                    },
                    {
                      c1: '#DDFF77',
                      c2: '#99DD00'
                    },
                    {
                      c1: '#66FF66',
                      c2: '#00DD00'
                    },
                    {
                      c1: '#77FFEE',
                      c2: '#00DDAA'
                    },
                    {
                      c1: '#77DDFF',
                      c2: '#009FCC'
                    },
                    {
                      c1: '#9999FF',
                      c2: '#0000CC'
                    },
                    {
                      c1: '#FF77FF',
                      c2: '#CC00CC'
                    },
                    {
                      c1: '#FFBB66',
                      c2: '#EE7700'
                    },
                    {
                      c1: '#FF88C2',
                      c2: '#C10066'
                    },
                    {
                      c1: '#FFBB66',
                      c2: '#EE7700'
                    },
                    {
                      c1: '#FF88C2',
                      c2: '#C10066'
                    }
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[params.dataIndex].c1
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2
                    }
                  ])
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 30,
                color: '#4BCFFC'
              },
              emphasis: {
                show: true
              }
            },
            data: arr
          }
        ]
      }
      option && this.dynamicCourse.setOption(option)
    },
    // 活跃课程
    sethistoryCourse(xAxis, series, a) {
      let option
      const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
      option = {
        backgroundColor: '#fff',
        title: {
          textStyle: {
            fontSize: 12,
            fontWeight: 400
          },
          left: 'center',
          top: '5%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(data) {
            let text = ''
            if (a) {
              if (series[0].list[data[0].dataIndex]) {
                series[0].list[data[0].dataIndex].forEach((e, i) => {
                  if (e) {
                    text += e.date + '&nbsp;&nbsp;'
                    text +=
                      data[0].marker +
                      data[0].seriesName +
                      series[0].list[data[0].dataIndex][i].data +
                      '门<br/>'
                  }
                })
              } else {
                text += ''
              }
            } else {
              text = data[0].name + '<br/>'
              for (let n = 0; n < data.length; n++) {
                text +=
                  data[n].marker +
                  data[n].seriesName +
                  ': ' +
                  data[n].value +
                  '门<br/>'
              }
            }
            return text
          },
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          top: '15%',
          right: '3%'
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: 'rgba(107,107,107,0.37)' //x轴颜色
              }
            },

            axisLabel: {
              textStyle: {
                color: '#999' //坐标轴字颜色
              },
              margin: 15
            },
            axisPointer: {
              label: {
                padding: [11, 5, 7],
                backgroundColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#fff' // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: '#fff' // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: '#33c0cd' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#33c0cd' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(107,107,107,0.37)' //y轴颜色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '活跃课程',
            type: 'line',
            data: series[0].data,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#9B84FF'
                },
                {
                  offset: 1,
                  color: '#A4FDFF'
                }
              ]),
              shadowColor: 'rgba(158,135,255, 0.3)',
              shadowBlur: 3,
              shadowOffsetY: 10
            },
            itemStyle: {
              normal: {
                color: colorList[0],
                borderColor: colorList[0]
              }
            }
          }
        ],
        dataZoom: [
          {
            bottom: 25,
            height: 10,
            type: 'slider', // 使用滑动条来控制
            showDataShadow: true, // 是否显示数据阴影
            start: 0, // 起始位置
            end: 100 // 结束位置
          },
          {
            bottom: 25,
            height: 10,
            type: 'inside', // 使用内置的区域缩放控制
            start: 0,
            end: 2
          }
        ]
      }

      option && this.historyCourse.setOption(option)
    },
    // 活跃班级
    setClassOption(arr1, activeClassPercentToday) {
      let option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}个 ({d}%)'
        },
        backgroundColor: '#fff',
        color: [
          '#EAEA26',
          '#906BF9',
          '#FE5656',
          '#01E17E',
          '#3DD1F9',
          '#FFAD05'
        ],
        grid: {
          left: 500,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true
        },
        polar: {
          // center: [150, 150]
        },
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B4A6B',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            show: false,
            interval: 0,

            color: '#0B4A6B',
            margin: 8,
            fontSize: 14
          }
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,.0)',
              width: 0
            }
          },
          axisLabel: {
            formatter: '（value） %',
            show: false,
            padding: [0, 0, 20, 0],
            color: '#0B3E5E',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#F1F8FF',
              width: 2,
              type: 'solid'
            }
          }
        },
        calculable: true,
        graphic: {
          type: 'text',
          left: 'center',
          top: '48%',
          style: {
            text: `${activeClassPercentToday}%`,
            textAlign: 'center',
            fill: '#333',
            fontSize: 12
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['17%', '18%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55
              }
            },
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#B5CCE7'
                  }
                },
                tooltip: {
                  show: false
                }
              }
            ]
          },
          {
            type: 'pie',
            radius: ['90%', '92%'],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55
              }
            },
            name: '',
            data: [
              {
                name: '',
                value: 0,
                itemStyle: {
                  normal: {
                    color: '#F1F8FF'
                  }
                },
                tooltip: {
                  show: false
                }
              }
            ]
          },
          {
            stack: 'a',
            type: 'pie',
            radius: ['20%', '80%'],
            roseType: 'area',
            zlevel: 10,
            label: {
              normal: {
                show: true,
                formatter: function(param) {
                  let style = ''
                  switch (param.name) {
                  }
                  return (
                    '{a|' +
                    param.name +
                    '}\n' +
                    '（' +
                    style +
                    param.value +
                    '个' +
                    '）'
                  )
                },
                textStyle: {
                  fontSize: 12
                },
                rich: {
                  a: {
                    color: '#666666',
                    fontSize: '12'
                  },
                  s1: {
                    color: '#F25646',
                    fontSize: '12'
                  },
                  s2: {
                    color: '#FA971E',
                    fontSize: '12'
                  },
                  s3: {
                    color: '#EDC644',
                    fontSize: '12'
                  },
                  s4: {
                    color: '#47B17D',
                    fontSize: '12'
                  },
                  s5: {
                    color: '#43C9D2',
                    fontSize: '12'
                  },
                  s6: {
                    color: '#4BCFFC',
                    fontSize: '12'
                  },
                  s7: {
                    color: '#0892E5',
                    fontSize: '12'
                  },
                  s8: {
                    color: '#0464DB',
                    fontSize: '12'
                  },
                  s9: {
                    color: '#EDC644',
                    fontSize: '12'
                  },
                  s10: {
                    color: '#138DFF',
                    fontSize: '12'
                  },
                  s11: {
                    color: '#CC0000',
                    fontSize: '12'
                  },
                  s12: {
                    color: '#DDAA00',
                    fontSize: '12'
                  },
                  s13: {
                    color: '#99DD00',
                    fontSize: '12'
                  },
                  s14: {
                    color: '#00DD00',
                    fontSize: '12'
                  },
                  s15: {
                    color: '#00DDAA',
                    fontSize: '12'
                  },
                  s16: {
                    color: '#009FCC',
                    fontSize: '12'
                  },
                  s17: {
                    color: '#0000CC',
                    fontSize: '12'
                  },
                  s18: {
                    color: '#CC00CC',
                    fontSize: '12'
                  },
                  s19: {
                    color: '#EE7700',
                    fontSize: '12'
                  },
                  s20: {
                    color: '#C10066',
                    fontSize: '12'
                  }
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  let colorList = [
                    {
                      c1: '#c5223b',
                      c2: '#fa768a'
                    },
                    {
                      c1: '#de7110',
                      c2: '#fecd70'
                    },
                    {
                      c1: '#d09f08',
                      c2: '#FFD145'
                    },
                    {
                      c1: '#238483',
                      c2: '#55C27C'
                    },
                    {
                      c1: '#45EAFF',
                      c2: '#40ADAC'
                    },
                    {
                      c1: '#12B3F8',
                      c2: '#7DE8FF'
                    },
                    {
                      c1: '#0176D3',
                      c2: '#13B7FF'
                    },
                    {
                      c1: '#015BD3',
                      c2: '#138DFF'
                    },
                    {
                      c1: '#FF8888',
                      c2: '#CC0000'
                    },
                    {
                      c1: '#FFDD55',
                      c2: '#DDAA00'
                    },
                    {
                      c1: '#DDFF77',
                      c2: '#99DD00'
                    },
                    {
                      c1: '#66FF66',
                      c2: '#00DD00'
                    },
                    {
                      c1: '#77FFEE',
                      c2: '#00DDAA'
                    },
                    {
                      c1: '#77DDFF',
                      c2: '#009FCC'
                    },
                    {
                      c1: '#9999FF',
                      c2: '#0000CC'
                    },
                    {
                      c1: '#FF77FF',
                      c2: '#CC00CC'
                    },
                    {
                      c1: '#FFBB66',
                      c2: '#EE7700'
                    },
                    {
                      c1: '#FF88C2',
                      c2: '#C10066'
                    },
                    {
                      c1: '#FFBB66',
                      c2: '#EE7700'
                    },
                    {
                      c1: '#FF88C2',
                      c2: '#C10066'
                    }
                  ]
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[params.dataIndex].c1
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2
                    }
                  ])
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 30,
                color: '#4BCFFC'
              },
              emphasis: {
                show: true
              }
            },
            data: arr1
          }
        ]
      }
      option && this.dynamicCalss.setOption(option)
    },
    // 活跃班级
    sethistoryClass(xAxis, series, a) {
      let option
      const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
      option = {
        backgroundColor: '#fff',
        title: {
          textStyle: {
            fontSize: 12,
            fontWeight: 400
          },
          left: 'center',
          top: '5%'
        },
        tooltip: {
          // showContent: false,
          trigger: 'axis',
          formatter: function(data) {
            let text = ''
            if (a) {
              if (series[0].list[data[0].dataIndex]) {
                series[0].list[data[0].dataIndex].forEach((e, i) => {
                  if (e) {
                    text += e.date + '&nbsp;&nbsp;'
                    text +=
                      data[0].marker +
                      data[0].seriesName +
                      series[0].list[data[0].dataIndex][i].data +
                      '个<br/>'
                  }
                })
              } else {
                text += ''
              }
            } else {
              text = data[0].name + '<br/>'
              for (let n = 0; n < data.length; n++) {
                text +=
                  data[n].marker +
                  data[n].seriesName +
                  ': ' +
                  data[n].value +
                  '个<br/>'
              }
            }
            return text
          },
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },
            lineStyle: {
              width: 0
            }
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
          top: '15%',
          right: '3%'
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: 'rgba(107,107,107,0.37)' //x轴颜色
              }
            },

            axisLabel: {
              textStyle: {
                color: '#999' //坐标轴字颜色
              },
              margin: 15
            },
            axisPointer: {
              label: {
                padding: [11, 5, 7],
                backgroundColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#fff' // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: '#fff' // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: '#33c0cd' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#33c0cd' // 100% 处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(107,107,107,0.37)' //y轴颜色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '活跃班级',
            type: 'line',
            data: series[0].data,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: '#9B84FF'
                },
                {
                  offset: 1,
                  color: '#A4FDFF'
                }
              ]),
              shadowColor: 'rgba(158,135,255, 0.3)',
              shadowBlur: 3,
              shadowOffsetY: 10
            },
            itemStyle: {
              normal: {
                color: colorList[0],
                borderColor: colorList[0]
              }
            }
          }
        ],
        dataZoom: [
          {
            bottom: 25,
            height: 10,
            type: 'slider', // 使用滑动条来控制
            showDataShadow: true, // 是否显示数据阴影
            start: 0, // 起始位置
            end: 100 // 结束位置
          },
          {
            bottom: 25,
            height: 10,
            type: 'inside', // 使用内置的区域缩放控制
            start: 0,
            end: 2
          }
        ]
      }

      option && this.historyClass.setOption(option)
    },
    // 获取学生活跃
    async getActiveStudent(a) {
      this.historyStudent = echarts.init(this.$refs.historyStudent)
      this.dynamicStudent = echarts.init(this.$refs.dynamicStudent)
      // if(this.$store.getters.roleId=='branchAdmin'){
      //   this.branchId=this.$store.getters.branchId;
      // }
      let res = await getActiveUser(1, this.studentType)
      const { code, data } = res
      if (code == 200) {
        this.sethistorystudent(
          data.lineGraphData.xAxis.data,
          data.lineGraphData.series,
          a
        )
        this.setStudentOption(data.loginPercent, data.activePercent)
        this.activestudentToday = data.activeUserToday
        this.loginstudentPercent = data.loginPercent
        this.activestudentPercent = data.activePercent
      }
    },
    // 获取教师活跃
    async getActiveTeacher(a) {
      this.historyTeacher = echarts.init(this.$refs.historyTeacher)
      this.dynamicTeacher = echarts.init(this.$refs.dynamicTeacher)
      // if(this.$store.getters.roleId=='branchAdmin'){
      //   this.branchId=this.$store.getters.branchId;
      // }
      let res = await getActiveUser(2, this.teacherType)
      const { code, data } = res
      if (code == 200) {
        console.log(data.lineGraphData.xAxis.data, data.lineGraphData.series)
        this.sethistoryTeacher(
          data.lineGraphData.xAxis.data,
          data.lineGraphData.series,
          a
        )
        this.setTeacherOption(data.loginPercent, data.activePercent)
        this.activeteacherToday = data.activeUserToday
        this.loginteacherPercent = data.loginPercent
        this.activeteacherPercent = data.activePercent
      }
    },
    // 切换日期
    changeDate(userType, type) {
      this.clearIntervalTimer()
      if (userType == 1) {
        this.studentType = type
        if (type == 3) {
          this.getActiveStudent(1)
        } else {
          this.getActiveStudent()
        }
      } else if (userType == 2) {
        this.teacherType = type
        if (type == 3) {
          this.getActiveTeacher(1)
        } else {
          this.getActiveTeacher()
        }
      } else if (userType == 3) {
        this.courseType = type
        if (type == 3) {
          this.getActivehistoryCourse(1)
        } else {
          this.getActivehistoryCourse()
        }
      } else {
        this.classType = type
        if (type == 3) {
          this.getActivehistoryClass(1)
        } else {
          this.getActivehistoryClass()
        }
      }
    },
    // 活跃课程
    async getActiveCourse() {
      this.dynamicCourse = echarts.init(this.$refs.dynamicCourse)
      let res = await getActiveCourse()
      const { code, data } = res
      console.log(data, '5555555555')
      if (code == 200) {
        if (!data.branchDataList || data.branchDataList.length == 0) {
          this.coursedatanone = true
          return
        }
        let arr = data.branchDataList.map((e) => {
          return {
            name: e.branchName,
            value: e.activeCourseCount
          }
        })
        this.setCourseOption(arr, data.activeCoursePercentToday)
        this.activeCourseCountToday = data.activeCourseCountToday
      }
    },
    // 获取活跃课程
    async getActivehistoryCourse(a) {
      this.historyCourse = echarts.init(this.$refs.historyCourse)
      let res = await getActivehistoryCourse(this.courseType)
      const { code, data } = res
      if (code == 200) {
        this.sethistoryCourse(data.xAxis.data, data.series, a)
      }
      console.log(data, '4444444444444')
    },
    // 获取课程学习情况
    async getActiveCourseList() {
      let res = await getActiveCourseList()
      const { code, data } = res
      if (code == 200) {
        for (let i = 0; i < 5; i++) {
          data[i].studyPercent += '%'
          this.courseList.push(data[i])
        }
      }
    },
    // 获取首次考核通过
    async getFirstPassCourseList() {
      let res = await getFirstPassCourseList()
      const { code, data } = res
      if (code == 200) {
        for (let i = 0; i < 5; i++) {
          data[i].passingOncePercent += '%'
          this.firstPassList.push(data[i])
        }
      }
    },
    // 获取今日活跃班级
    async getactiveClassToday() {
      this.dynamicCalss = echarts.init(this.$refs.dynamicCalss)
      let res = await getactiveClassToday()
      const { code, data } = res
      console.log(data, '5555555555')
      if (code == 200) {
        if (!data.branchList || data.branchList.length == 0) {
          this.classdatanone = true
          return
        }
        let arr1 = data.branchList.map((e) => {
          return {
            name: e.branchName,
            value: e.activeClass
          }
        })
        console.log(arr1, 'ddkkfnvekwrhwo2ior')
        this.setClassOption(arr1, data.activeClassPercentToday)
        this.activeClassCountToday = data.activeClassCountToday
      }
    },
    // 获取活跃班级
    async getActivehistoryClass(a) {
      this.historyClass = echarts.init(this.$refs.historyClass)
      let res = await getActivehistoryClass(this.classType)
      const { code, data } = res
      if (code == 200) {
        this.sethistoryClass(data.xAxis.data, data.series, a)
      }
    },
    async getreTestRateOfClassList() {
      let res = await getreTestRateOfClassList()
      const { code, data } = res
      if (code == 200) {
        for (let i = 0; i < 5; i++) {
          data[i].retestPercent += '%'
          this.TestRateOfClassList.push(data[i])
        }
      }
    },
    // 查看详情
    lookDetail(userType, type) {
      if (userType != 0) {
        this.$refs.activeUser.show(userType)
      } else if (type == 'course') {
        this.$refs.activeCourse.show()
      } else if (type == 'courseStudy') {
        this.$refs.todaystudy.show()
      } else if (type == 'classes') {
        this.$refs.classdetail.show()
      } else if (type == 'firstPass') {
        this.$refs.firstpass.show()
      } else if (type == 'resetExam') {
        this.$refs.resetExam.show()
      }

      // console.log('aaaa',this.$refs.activeUser)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 24px 24px 24px 16px !important;
  box-sizing: border-box;
}

.app-container {
  box-sizing: border-box;
}

.view_home {
  padding: 20px 0 10px 0;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.mainTitle {
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  //margin: 40px 0 16px 0;
  margin-bottom: 16px;
  margin-top: 24px;
}

.firstTitle {
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 22px;
  margin-bottom: 14px;
  cursor: default;
}

.doubleBox {
  display: flex;
  flex-wrap: wrap;
  //justify-content: space-between;

  .box-card {
    //flex: 0 1 ;
    width: calc(50% - 10px);
    min-width: 500px;
    height: 320px;
    border-radius: 16px;
    margin-bottom: 16px;
  }

  .box-card:first-child {
    margin-right: 20px;
  }
}

.singleBox {
  .box-card {
    width: 100%;
    height: 370px;
    min-width: 570px;
    //max-width: 1320px;
    border-radius: 16px;
    margin-bottom: 16px;
  }
}

.innerFlexbox {
  display: flex;
  justify-content: space-between;
}

.sunTitle {
  display: flex;
  align-items: center;

  .subborder {
    width: 4px;
    height: 14px;
    background: #466aef;
    border-radius: 2px;
    margin-right: 4px;
  }

  .sunTitletext {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    cursor: default;
    display: flex;
    align-items: center;
  }
}

.tipsIcon {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
  user-select: none;
}

.tipsIconMore {
  width: 14px;
  height: 14px;
  margin: 0 4px;
  cursor: pointer;
  user-select: none;
}

.TitleBox {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .lookMore {
    font-weight: 400;
    font-size: 14px;
    color: #4a90e2;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
  }
}

.dynamicStudent {
  width: 25%;
  height: 224px;
}

.pieChart {
  width: 100%;
  height: 80%;
  margin-top: 10px;
  margin-bottom: 17px;
}

.stateIcon {
  width: 10px;
  height: 10px;
}

.dynamicStudenttext {
  display: flex;
  align-items: center;
  justify-content: center;
  //text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  line-height: 22px;
  margin-bottom: 4px;
  //margin-top: 30px;
  cursor: default;
}

//.dynamicStudenttext_l{
//  display: flex;
//  align-items: center;
//  justify-content: center;
//  //text-align: center;
//  font-size: 16px;
//  font-weight: 500;
//  color: #333333;
//  line-height: 22px;
//  margin-bottom: 4px;
//  //margin-top: 30px;
//  cursor: default;
//}

.dynamichistoryStudent {
  width: 70%;
  height: 234px;
  //background: #999999;
}

.lineChart {
  width: 100%;
  height: 100%;
  //background: #0b8cfc;
}

//切换
.changeTab {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 8px;

  div {
    font-weight: 500;
    font-size: 12px;
    color: #999999;
    line-height: 17px;
    text-align: left;
    margin-left: 16px;
    cursor: pointer;
    user-select: none;
  }

  .active {
    color: #256ffe;
    border-bottom: 2px solid #466aef;
  }
}

.courseBox {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  //justify-content: space-between;

  .course_l {
    top: 240px;
    right: 5%;
    position: absolute;
    z-index: 1;
  }

  .course_r {
    width: 100%;
    height: 250px;
  }
}

.historyCourse {
  width: 100%;
  height: 262px;
  //background: #999999;
}

.todayCourseTable {
  margin-top: 24px;
}

.stateUp {
  font-weight: 500;
  font-size: 12px;
  color: #0dd806;
  line-height: 20px;
  text-align: left;
  margin: 0 8px;
}

.stateDown {
  font-weight: 500;
  font-size: 12px;
  color: #d81e06;
  line-height: 20px;
  text-align: left;
  margin: 0 8px;
}

.noneImg {
  width: 300px;
  height: 300px;
  margin: auto;
}
</style>

